.rule-detail-modal {
  max-width: 900px;
}

.rule-detail-modal .ant-modal-header {
  border-bottom: 1px solid #f0f0f0;
  padding: 16px 24px;
}

.rule-detail-modal .ant-modal-body {
  padding: 24px;
}

.rule-detail-modal .ant-descriptions-item-label {
  font-weight: 600;
  background-color: #fafafa;
  width: 140px;
}

.rule-detail-modal .ant-descriptions-item-content {
  padding: 12px 16px;
}

.rule-id-tag {
  font-weight: 500;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
}

.rule-pattern-code {
  background-color: #f5f5f5 !important;
  padding: 8px 12px !important;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
  line-height: 1.4;
  display: block;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #d9d9d9;
}

.example-sql-code {
  background-color: #fff2e8 !important;
  padding: 8px 12px !important;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
  line-height: 1.4;
  display: block;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #ffd591;
}

.suggested-sql-code {
  background-color: #f6ffed !important;
  padding: 8px 12px !important;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
  line-height: 1.4;
  display: block;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #b7eb8f;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .rule-detail-modal {
    margin: 0 8px;
    max-width: calc(100vw - 16px);
  }
  
  .rule-detail-modal .ant-modal-body {
    padding: 16px;
  }
  
  .rule-detail-modal .ant-descriptions {
    font-size: 12px;
  }
  
  .rule-detail-modal .ant-descriptions-item-label {
    width: 100px;
  }
}
